<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="get">get</button>
    <button class="post">post</button>
</body>
<script>
    var getBtn = document.getElementsByClassName("get")[0];
    var postBtn = document.getElementsByClassName("post")[0];


    getBtn.onclick = function () {

        // "id=${id}&ch=${ch}&mh=${mh}&en=${en}"

        // get("../php/isExistUser.php", "user=a1231231", true, "json", function (res) {
        //     console.log("请求结束", res);
        //     var { status, msg } = res;
        //     alert(msg);

        // })

        get({
            url: "../php/isExistUser.php",
            data: "user=a1231231",
            // async:true,
            dataType: "json",
            success: function (res) {
                console.log("请求结束", res);
                var { status, msg } = res;
                alert(msg);
            },
        })

        var id = 1;
        var ch = 55;
        var mh = 66;
        var en = 77;

        // get("../php/updateGradeByIdGet.php", `id=${id}&ch=${ch}&mh=${mh}&en=${en}`, true, "json", function (res) {
        //     console.log("请求结束", res);
        //     var { status, msg } = res;
        //     alert(msg);

        // })

        // 问题1: 
        // 多参数传参 讲究一一对应 ,如果参数顺序不同  => 结果就大不一样
        // 有没有什么方法? 可以让参数排名不分先后

        // 解决方法 
        // 将参数先整合到一个对象中 {url,data,async,dataType,success}


        // 问题2:
        // data数据可以没有 也可以有多个 => 多条数据还需要自己手动拼接
        // eg:
        // id=1&ch=55&mh=66&en=77
        // user=a123123&pwd=123123&phone=17386141516&email=1272071495@qq.com

        // 分析:  
        // 1.  参数数据 以键值对的形式存在,多条数据之间以 "&"分隔
        // 2.  排名不分先后

        // 解决方式  =>  可以传入一个对象作为参数 => 拼接成键值对的形式


        get({
            url: "../php/updateGradeByIdGet.php",
            data: `id=${id}&ch=${ch}&mh=${mh}&en=${en}`,
            // async:true,
            dataType: "json",
            success: function (res) {
                console.log("请求结束", res);
                var { status, msg } = res;
                alert(msg);
            },
        })

    }

    // url      请求地址
    // data     传递的数据
    // async    是否异步
    // dataType 接口返回的数据类型 (text(默认)/html/json)
    // success  回调函数 => 请求成功时执行的内容 (回调函数有一个形式参数  用于接收接口返回的结果)


    function get(options) {  // 传入一个对象作为参数    
        // debugger;
        var { url, data = "", async = true, dataType = "text", success } = options;

        // var success = function (res) {   //形式参数
        //     console.log("请求结束",res);
        // }

        var xhr = new XMLHttpRequest();

        xhr.open("get", url + "?" + data, async);

        xhr.send();

        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var result = xhr.responseText;
                console.log(result);
                if (dataType == "json") {  // 如果用户说 返回的数据是json => JSON.parse();
                    result = JSON.parse(result);
                }
                console.log(result);

                // 获取接口响应的结果之后  => 用户执行的内容并不是固定的
                if (success) {
                    success(result);   // 回调函数在执行过程中 => 将请求的结果作为实际参数传入
                }

            }
        }
    }



    // { url, data = "", async = true, dataType = "text", success } = {}
    //  参数的默认结构                                                  参数的默认值
    function get({ url, data = "", async = true, dataType = "text", success } = {}) {  // 传入一个对象作为参数    
        // debugger;
        // var { url, data = "", async = true, dataType = "text", success } = options;

        // var success = function (res) {   //形式参数
        //     console.log("请求结束",res);
        // }

        var xhr = new XMLHttpRequest();

        xhr.open("get", url + "?" + data, async);

        xhr.send();

        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var result = xhr.responseText;
                console.log(result);
                if (dataType == "json") {  // 如果用户说 返回的数据是json => JSON.parse();
                    result = JSON.parse(result);
                }
                console.log(result);

                // 获取接口响应的结果之后  => 用户执行的内容并不是固定的
                if (success) {
                    success(result);   // 回调函数在执行过程中 => 将请求的结果作为实际参数传入
                }

            }
        }
    }






</script>

</html>